Full Route Cache

warning.icon 15 から Data Cache がデフォルトで無効になったため、以前よりもキャッシュされる条件が厳しくなった

概要

Next.js の 4 種類のキャッシュの 1 つで、レンダリングコストの削減とパフォーマンスの向上を目的とする

ビルドまたは Revalidate 時に、Static Rendering する Route に対して、自動で RSC Payload と HTML をレンダリングしてその結果をキャッシュする

クライアントからのリクエスト時にレンダリングを行うのではなく、事前に生成した RSC Payload と HTML を利用することで、パフォーマンスの向上が期待できる

永続的に保持されるが、以下のいずれかの方法で Revalidate 可能

サーバ上のコンポーネントを再レンダリングし、新しいレンダリング結果を出力するため

2. 再デプロイ

以下のいずれかの方法で無効化できる

code:ts

export const dynamic = 'force-dynamic';

// または

export const revalidate = 0;

Data Cache が無効になった fetch が存在する

If a route has a fetch request that is not cached, this will opt the route out of the Full Route Cache.

動作フロー

サーバ上での React のレンダリング

https://scrapbox.io/files/66ecd2c5a154db001dca39fe.png

クライアント上での React による Hydration と Reconciliation

1. HTML は初期表示データとして用いられる

2. RSC Payload は差分検出し、DOM を更新するために用いられる

3. Client Component を Hydration し、アプリケーションをインタラクティブな状態にする